<template>
    <div class="the-left-box">
        <TailingGrade class="tailing-grade-big-box" title="尾矿库等级" :image="imageOne" />
        <OperationStatus class="operation-status-big-box" title="运行状况" :image="imageTwo" />
        <RiskRatio class="risk-ratio-big-box" title="尾矿库风险比例" :image="imageThree" />
        <RegionalDistribution
            class="regional-distribution-big-box"
            title="头顶库地区分布"
            :image="imageFour"
        />
    </div>
</template>

<script>
import TailingGrade from "./component/TailingGrade";
import OperationStatus from "./component/OperationStatus";
import RiskRatio from "./component/RiskRatio";
import RegionalDistribution from "./component/RegionalDistribution";

export default {
    name: "TheLeft",

    components: {
        TailingGrade,
        OperationStatus,
        RiskRatio,
        RegionalDistribution,
    },

    data() {
        return {
            imageOne: require("@/asset/image/panel-pic-one.png"),
            imageTwo: require("@/asset/image/panel-pic-two.png"),
            imageThree: require("@/asset/image/panel-pic-three.png"),
            imageFour: require("@/asset/image/panel-pic-four.png"),
        };
    },
};
</script>

<style lang="scss" scoped>
.the-left-box {
    width: 100%;
    height: 100%;
    .tailing-grade-big-box {
        height: 190px;
    }

    .operation-status-big-box {
        height: 150px;
    }

    .risk-ratio-big-box {
        height: 210px;
    }

    .regional-distribution-big-box {
        height: 210px;
    }
}
</style>